<template>
	<view>
		<searchBar :phlText="'输入昵称、消息内容'" @search="toSearch" ref="searchBar"></searchBar>
		<view class="msg-list">
			<!-- 1：申请添加好友添加消息  2：添加好友成功的系统通知 3：公告 4：聊天消息通知  5：点评消息通知  6：收到一条分享点评 -->
			<msg-item v-for="(item,index) in msgList" :key="item.id" @itemClk="msgItemClk(item.type,item,index)" :msgData="item"
				:type="item.type"></msg-item>
		</view>

		<view class="more-tips">
			<text v-show="loadingMoreTipsShow">更多加载中...</text>
			<text v-show="noMoreTipsShow">没有更多啦~</text>
			<text v-show="noDataTipsShow">暂无信息</text>
		</view>
	</view>
</template>

<script>
	import msgItem from './msgItem.vue'
	export default {
		components: {
			msgItem
		},
		data() {
			return {
				loadingMoreTipsShow: false,
				noMoreTipsShow: false,
				noDataTipsShow: false,
				pageNo: 1,
				pageSize: 10,
				searchKey:'',
				msgList: []
			};
		},

		created() {
			this.searchKey = '';
			this.initGetList()
		},
		onPullDownRefresh() {
			this.searchKey = '';
			this.$refs.searchBar.reset();
			this.initGetList()
		},
		onReachBottom() {

			if (this.noMoreTipsShow || this.loadingMoreTipsShow) return

			this.loadingMoreTipsShow = true

			this.getMsgList().then((res) => {
				this.loadingMoreTipsShow = false
				if (res.rows && res.rows.length) {
					this.msgList = [...this.msgList, ...res.rows]
				} else {
					this.noMoreTipsShow = true
				}
			})
		},
		methods: {
			toSearch(key) {
               this.searchKey = key;
			   this.initGetList()
			},
			initGetList() {
				this.pageNo = 1
				this.noMoreTipsShow = false
				this.noDataTipsShow = false
				this.loadingMoreTipsShow = false
				uni.showLoading({
					mask: true
				});
				this.getMsgList().then((res) => {
					if (!res.rows || res.rows.length === 0) {
						this.noDataTipsShow = true
					} else if (res.rows.length < this.pageSize) {
						this.noMoreTipsShow = true
					}
					this.msgList = res.rows
					uni.hideLoading()
					uni.stopPullDownRefresh()
				})
			},

			getMsgList() {
				const data = this.searchKey ? { keywords: this.searchKey } : {}
				return this.$api.getMsgList({
					pageNo: this.pageNo,
					pageSize: this.pageSize,
					...data
				}).then((res) => {
					this.pageNo++
					
					res.rows = res.rows.filter(item=>item.type*1 !== 4) // 聊天消息提到另外单独页面
					res.rows.forEach((item)=>{
						item.type = item.type * 1
					})
					return res
				})
			},

			msgItemClk(type, data, index) {
				//  1：申请添加好友添加消息  2：添加好友成功的系统通知 3：公告 4：聊天消息通知  5：点评消息通知 6：收到一条分享点评
				if (type == 4) {
					// 外面单独开了个口子去聊天了
				} else {
					if(!data.isRead){
						this.$api.setMsgRead(data.id).then(()=>{
							this.msgList[index].isRead = true
							uni.navigateTo({
								url: `/pages/message/msgDetail?type=${type}&id=${data.id}`
							})
						})
					}else{
					    uni.navigateTo({
						     url: `/pages/message/msgDetail?type=${type}&id=${data.id}`
					    })
					}
				}
			}
		}
	}
</script>

<style lang="less">
	.msg-list {
		width: 630rpx;
		margin: 0 auto;
	}

	.more-tips {
		height: 80rpx;
		font-size: 26rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #aaa;
	}
</style>
